<!DOCTYPE html>
<html lang="en">
<head>
    <title>6-3 RocketMQ 作业</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        function submitOrder() {
            $.ajax({
                type: "GET",
                url: "http://localhost:8080/api/submit-order",
                dataType: "json",
                success: function (data) {
                    alert("下单成功，请在15s内完成支付")
                    getOrder();
                },
                error: function (data) {
                    alert("下单失败，商品库存不足")
                }
            })
        }
        function payOrder(id){
            $.ajax({
                type: "GET",
                url: "http://localhost:8080/api/pay-order/" + id,
                dataType: "json",
                success: function (data) {
                    alert(data.message);
                    getOrder();
                },
                error: function (data) {
                    alert("订单已过期")
                }
            })
        }


        function getOrder(){
            $.ajax({
                type: "GET",
                url: "http://localhost:8080/api/get-order",
                dataType: "json",
                // crossDomain: true,
                //允许跨域的cookie访问
                // xhrFields: {
                //     withCredentials: true
                // },
                success: function (data) {
                    var html = "";
                    for(var i=0;i<data.length;i++){
                        html += "<tr><td>" + data[i].orderNumber + "</td><td>" + (data[i].orderStatus==0?"待支付":data[i].orderStatus==1?"支付成功":"已过期") +
                            "</td><td><button class='pay-btn' onclick='payOrder(" + data[i].id + ")'>支付</button></td></tr>";
                    }
                    $("#order-body").empty();
                    $("#order-body").append(html);
                },
                error: function (data) {
                    alert("订单获取失败")
                }
            })
        }
        getOrder();




    </script>
</head>
<body>
<div class="row" style="text-align: center;margin-top:200px;">
    <div style="text-align:right;width:100%;">
        <div class="lagou-div">
            <button class="lagou-btn" type="button" onclick="getOrder()">刷新</button>
        </div>
        <div class="lagou-div" style="margin-right:40px;">
            <button class="lagou-btn" type="button" onclick="submitOrder()">下单</button>
        </div>
    </div>

    <table style="width:100%;margin:20px 40px;">
        <thead>
        <tr>
            <th>订单号</th>
            <th>订单状态</th>
            <th>
                操作
            </th>
        </tr>
        </thead>
        <tbody id="order-body">

        </tbody>
    </table>
</div>
</body>
</html>

<style>
	.lagou-div {
		display:inline-block;
	}
	.lagou-btn{
		background-color:#3399ff;
		color:#fff;
		border:none;
		padding:5px 10px;
		font-size:20px;
	}
    .pay-btn {
        background-color:#3399ff;
        color:#fff;
        border:none;
        padding:5px 10px;
        font-size:16px;
    }
</style>